<template>
  <div>
    <!-- 顶部信息展示 -->
    <div class="instrument_panel_top">
      <!-- 系统信息 -->
      <el-card style="width: 49%">
        <div slot="header" class="clearfix">
          <span>系统信息</span>
        </div>
        <table>
          <tr>
            <th>参数</th>
            <th>值</th>
            <th>细节</th>
          </tr>
          <tr>
            <td>服务器端运行中</td>
            <td><span style="color: #2f9f5e">是</span></td>
            <td>localhoust:10050</td>
          </tr>
          <tr>
            <td>主机数量(已启动/未启动)</td>
            <td>
              {{
                (responses.length &&
                  responses[0].value &&
                  responses[0].value.data.total) ||
                0
              }}
            </td>
            <td>
              <span style="color: #2f9f5e">{{
                (responses.length &&
                  responses[0].value &&
                  responses[0].value.data.enableNum) ||
                0
              }}</span
              >/
              <span style="color: #d23d3d">{{
                (responses.length &&
                  responses[0].value &&
                  responses[0].value.data.disableNum) ||
                0
              }}</span>
            </td>
          </tr>
          <tr>
            <td>监控项数量(已启用/已禁用/不支持)</td>
            <td>
              {{
                (responses.length &&
                  responses[1].value &&
                  responses[1].value.data.total) ||
                0
              }}
            </td>
            <td>
              <span style="color: #2f9f5e">
                {{
                  (responses.length &&
                    responses[1].value &&
                    responses[1].value.data.activeNum) ||
                  0
                }}
              </span>
              /
              <span style="color: #d23d3d">
                {{
                  (responses.length &&
                    responses[1].value &&
                    responses[1].value.data.notSupportNum) ||
                  0
                }}
              </span>
              /
              <span>
                {{
                  (responses.length &&
                    responses[1].value &&
                    responses[1].value.data.disabledNum) ||
                  0
                }}
              </span>
            </td>
          </tr>
          <tr>
            <td>触发器数量(已经启用/已禁用[问题/正常])</td>
            <td>
              {{
                (responses.length &&
                  responses[2].value &&
                  responses[2].value.data.total) ||
                0
              }}
            </td>
            <td>
              <span>
                {{
                  (responses.length &&
                    responses[2].value &&
                    responses[2].value.data.status0) ||
                  0
                }}
              </span>
              /
              <span>
                {{
                  (responses.length &&
                    responses[2].value &&
                    responses[2].value.data.total - responses.length &&
                    responses[2].value.data.status0) ||
                  0
                }}
              </span>
              [
              <span style="color: #d23d3d">
                {{
                  (responses.length &&
                    responses[2].value &&
                    responses[2].value.data.value1) ||
                  0
                }}
              </span>
              /
              <span style="color: #2f9f5e">
                {{
                  (responses.length &&
                    responses[2].value &&
                    responses[2].value.data.value0) ||
                  0
                }}
              </span>
              ]
            </td>
          </tr>
        </table>
      </el-card>
      <!-- 右边盒子 -->
      <div style="width: 50%">
        <!-- 主机可用性能 -->
        <el-card style="height: 160px">
          <div slot="header" class="clearfix">
            <span>主机可用性</span>
          </div>
          <div>
            <el-row :gutter="20" class="mt10">
              <el-col :span="6">
                <div class="item" style="background-color: #67c23a">
                  <el-statistic title="可用">
                    <template slot="formatter">
                      {{ HostAvailability.available }}
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="item" style="background-color: #d9001b">
                  <el-statistic title="不可用">
                    <template slot="formatter">
                      {{ HostAvailability.disabled }}</template
                    >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="item" style="background-color: rgb(224, 185, 12)">
                  <el-statistic title="未知">
                    <template slot="formatter">
                      {{ HostAvailability.unKnow }}</template
                    >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="item" style="background-color: #d7d7d7">
                  <el-statistic title="合计">
                    <template slot="formatter">
                      {{ HostAvailability.total }}
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- 问题 -->
        <el-card class="mt20" style="height: 165px">
          <div slot="header" class="clearfix">
            <span>问题</span>
          </div>
          <div>
            <el-row :gutter="20" class="mt10">
              <el-col :span="4">
                <div class="item" style="background-color: #d9001b">
                  <el-statistic title="灾难">
                    <template slot="formatter">{{ question[5] }} </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="item" style="background-color: #ec808d">
                  <el-statistic title="严重">
                    <template slot="formatter"> {{ question[4] }} </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="item" style="background-color: #f59a23">
                  <el-statistic title="一般严重">
                    <template slot="formatter"> {{ question[3] }} </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="item" style="background-color: #facd91">
                  <el-statistic title="警告">
                    <template slot="formatter"> {{ question[2] }} </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="item" style="background-color: #409eff">
                  <el-statistic title="信息">
                    <template slot="formatter"> {{ question[1] }} </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="item" style="background-color: #d7d7d7">
                  <el-statistic title="未分类">
                    <template slot="formatter"> {{ question[0] }} </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>

    <el-dialog title="操作系统安装" :visible="system">
      <el-form
        :model="systemform"
        label-width="50px"
        ref="systemform"
        :rules="rules"
      >
        <el-form-item label="Ip" prop="systemIp">
          <el-input
            v-model="systemform.systemIp"
            style="width: 300px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goSystem('systemform')"
          >确 定</el-button
        >
        <el-button @click="system = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 下面主机列表 -->
    <el-card class="mt20 mb20">
      <div slot="header" class="clearfix">
        <span>主机</span>
        <el-button
          class="ml20"
          type="primary"
          @click="showAddNano"
          size="mini"
          style="margin-left: 15px"
          >纳管</el-button
        >
        <el-button
          class="ml20"
          type="primary"
          @click="gotoAutodiscover"
          size="mini"
          >自动发现</el-button
        >
        <el-button
          class="ml20"
          type="primary"
          @click="gotoScriptMange"
          v-hasPermi="['automated:script:add']"
          size="mini"
          >脚本管理</el-button
        >
        <el-button class="ml20" type="primary" @click="showsystem" size="mini"
          >操作系统安装</el-button
        >
      </div>
      <!-- 查询表单 -->
      <el-form
        size="mini"
        :inline="true"
        :model="query"
        class="demo-form-inline"
        ref="query"
        :rules="queryRules"
      >
        <el-form-item label="名称:">
          <el-input v-model="query.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="IP:" prop="ip">
          <el-input v-model="query.ip" placeholder="请输入IP"></el-input>
        </el-form-item>
        <!-- <el-form-item label="端口:" prop="port">
          <el-input
            v-model.number="query.port"
            placeholder="请输入端口"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="状态:">
          <el-radio-group v-model="query.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">禁用</el-radio>
            <el-radio label="">全部</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery('query')" class="ml10"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="warning" class="ml10" @click="resize('query')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table
        :cell-style="getCellClass"
        :data="tableData_host"
        style="width: 100%"
        height="calc(100vh - 280px)"
        v-loading="hostLoading"
      >
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ip"
          label="IP地址"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column label="类型" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.available == 0"
              style="
                color: #acbbc2;
                background-color: #ebebeb;
                border: 1px solid #ccd5d9;
              "
              >{{ scope.row.type == 1 ? "ZBX" : "SNMP" }}</el-tag
            >
            <el-tag
              v-if="scope.row.available == 1"
              style="
                color: #ffffff;
                border: 1px solid #2f9f5e;
                background-color: #34af67;
              "
              >{{ scope.row.type == 1 ? "ZBX" : "SNMP" }}</el-tag
            >
            <el-tag
              v-if="scope.row.available == 2"
              style="
                color: #ffffff;
                border: 1px solid #d23d3d;
                background-color: #d64e4e;
              "
              >{{ scope.row.type == 1 ? "ZBX" : "SNMP" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="最新数据"
          show-overflow-tooltip
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <div style="cursor: pointer" @click="goEnviro(scope.row)">
              <el-link type="primary">最新数据</el-link>&nbsp;&nbsp;{{
                scope.row.items
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <div
              class="switch_box"
              :class="
                scope.row.status == '0' ? 'my_switch_checked' : 'my_switch_no'
              "
              @click="handleChangeStatus(scope.row)"
            ></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="flags"
          label="监控项"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <div style="cursor: pointer" @click="goMonitoring(scope.row)">
              <el-link type="primary"
                >监控项&nbsp;{{ scope.row.items }}</el-link
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="flags"
          label="触发器"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <div
              style="cursor: pointer"
              @click="
                goTrigger(
                  scope.row.hostid,
                  scope.row.interfaces[0].ip,
                  scope.row.host
                )
              "
            >
              <el-link type="primary"
                >触发器&nbsp;{{ scope.row.triggers }}</el-link
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini" @click="showEdit(scope.row)"
              >编辑</el-button
            > -->
            <el-button type="danger" size="mini" @click="deleteHost(scope.row)"
              >删除</el-button
            >
            <el-dropdown szie="mini" trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-hasPermi="['automated:script:add']"
                  :command="'ScriptExecution?hostid=' + scope.row.hostid"
                  >脚本执行</el-dropdown-item
                >
                <el-dropdown-item @click.native="goBackups(scope.row)"
                  >配置备份</el-dropdown-item
                >
                <el-dropdown-item :command="'Check?hostid=' + scope.row.hostid"
                  >配置检查</el-dropdown-item
                >
                <el-dropdown-item :command="'Change?hostid=' + scope.row.hostid"
                  >配置变更</el-dropdown-item
                >
                <el-dropdown-item @click.native="getPatch(scope.row.hostid)"
                  >补丁分析和分发</el-dropdown-item
                >
                <el-dropdown-item
                  :command="
                    'Prodistribution?hostid=' +
                    scope.row.hostid +
                    '&hostIp=' +
                    scope.row.ip
                  "
                  >应用程序分发</el-dropdown-item
                >
                <el-dropdown-item
                  :command="
                    'OperationalAudit?hostid=' +
                    scope.row.hostid +
                    '&auditType=' +
                    1
                  "
                  >操作审计</el-dropdown-item
                >
                <el-dropdown-item
                  :command="
                    'ComplianceAudit?hostid=' +
                    scope.row.hostid +
                    '&auditType=' +
                    2
                  "
                  >合规审计</el-dropdown-item
                >
                <el-dropdown-item
                  :command="'Correct?hostid=' + scope.row.hostid"
                  >配置修正</el-dropdown-item
                >
                <el-dropdown-item
                  :command="'ViewGraphics?hostids=' + scope.row.hostid"
                  >查询图形</el-dropdown-item
                >
                <el-dropdown-item
                  :command="'Scheduling?hostid=' + scope.row.hostid"
                  >作业调度</el-dropdown-item
                >
                <el-dropdown-item
                  command=""
                  @click.native="remoteManage(scope.row.ip)"
                  >远程管理</el-dropdown-item
                >
                <el-dropdown-item @click.native="showAccount(scope.row)"
                  >账号管理</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="tableData_host.length > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getHostList"
      />
    </el-card>

    <!-- 新增纳管弹窗 -->
    <el-dialog title="纳管" :visible.sync="dialogFormVisible" width="50%">
      <el-form
        :model="nanotubeForm"
        size="mini"
        :rules="rules"
        ref="nanotubeForm"
      >
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input
            v-model="nanotubeForm.name"
            autocomplete="off"
            style="width: 87%"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="主机类型" label-width="100px" prop="hostType">
          <el-select v-model="nanotubeForm.hostType" style="width: 87%">
            <el-option label="windows" :value="1"></el-option>
            <el-option label="linux" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 纳管类型 -->
        <el-form-item label="纳管类型" label-width="100px">
          <!--客户端  -->
          <el-form
            :inline="true"
            :model="agent"
            ref="agent"
            class="demo-form-inline"
            size="mini"
            label-position="top"
            hide-required-asterisk
            :rules="rules"
          >
            <div style="display: flex; width: 100%">
              <el-form-item style="margin-top: 38px">
                <el-radio v-model="radio" label="1">客户端</el-radio>
              </el-form-item>
              <el-form-item label="ip地址" prop="ip">
                <el-select
                  v-model="agent.ip"
                  filterable
                  allow-create
                  placeholder="请选择ip"
                  :disabled="radio == 2"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.ip"
                    :value="item.ip"
                  >
                  </el-option>
                </el-select>

                <!-- <el-input v-model="agent.ip" :disabled="radio == 2"
                                    placeholder="例如192.168.10.251"></el-input> -->
              </el-form-item>
              <el-form-item label="连接到" prop="useip">
                <el-radio-group v-model="agent.useip" :disabled="radio == 2">
                  <el-radio-button label="1">IP</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="端口" prop="port">
                <el-input
                  v-model.number="agent.port"
                  :disabled="radio == 2"
                ></el-input>
              </el-form-item>
              <!-- 默认 -->
              <el-form-item label="默认" prop="main">
                <el-radio
                  v-model="agent.main"
                  label="1"
                  :disabled="radio == 2"
                  >{{ "" }}</el-radio
                >
              </el-form-item>
            </div>
          </el-form>

          <!--snmp -->
          <el-form
            :inline="true"
            :model="snmp"
            ref="snmp"
            class="demo-form-inline"
            size="mini"
            :rules="rules"
          >
            <div style="display: flex; width: 100%">
              <!-- 类型 -->
              <el-form-item>
                <el-radio v-model="radio" label="2">SNMP</el-radio>
              </el-form-item>
              <!-- ip地址 -->
              <el-form-item prop="ip">
                <el-select
                  v-model="snmp.ip"
                  filterable
                  allow-create
                  placeholder="请选择ip"
                  :disabled="radio == 1"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.ip"
                    :value="item.ip"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input v-model="snmp.ip" :disabled="radio == 1"
                                    placeholder="例如192.168.10.251"></el-input> -->
              </el-form-item>
              <!-- 连接到 -->
              <el-form-item prop="useip">
                <el-radio-group v-model="snmp.useip" :disabled="radio == 1">
                  <!-- <el-radio-button label="DNS"></el-radio-button> -->
                  <el-radio-button label="1">IP</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <!-- 端口 -->
              <el-form-item prop="port">
                <el-input
                  v-model.number="snmp.port"
                  :disabled="radio == 1"
                ></el-input>
              </el-form-item>

              <!-- 默认 -->
              <el-form-item prop="main">
                <el-radio
                  v-model="snmp.main"
                  label="1"
                  :disabled="radio == 1"
                  >{{ "" }}</el-radio
                >
              </el-form-item>
            </div>
            <div style="display: flex; flex-direction: column; width: 100%">
              <el-form-item label="SNMP version" label-width="120px">
                <el-select
                  v-model="snmp.details.version"
                  style="width: 92%"
                  :disabled="radio == 1"
                >
                  <el-option label="SNMPv2" value="2"></el-option>
                  <el-option label="SNMPv3" value="3"></el-option>
                </el-select>
              </el-form-item>
              <templete v-show="snmp.details.version == '3'">
                <el-form-item label="上下文名称" label-width="120px">
                  <el-input
                    v-model="snmp.details.contextname"
                    :disabled="radio == 1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="安全名称" label-width="120px">
                  <el-input
                    v-model="snmp.details.securityname"
                    :disabled="radio == 1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="安全级别" label-width="120px">
                  <el-select
                    v-model="snmp.details.securitylevel"
                    style="width: 92%"
                    disabled
                  >
                    <el-option label="noAuthNoPriv" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-checkbox
                    v-model="snmp.details.bulk"
                    true-label="1"
                    :disabled="radio == 1"
                    false-label="0"
                    >使用大量请求</el-checkbox
                  >
                </el-form-item>
              </templete>
              <templete v-show="snmp.details.version == '2'">
                <el-form-item label="SNMP community" label-width="120px">
                  <el-input
                    v-model="snmp.details.community"
                    :disabled="radio == 1"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox
                    v-model="snmp.details.bulk"
                    true-label="1"
                    :disabled="radio == 1"
                    false-label="0"
                    >使用大量请求</el-checkbox
                  >
                </el-form-item>
              </templete>
            </div>
          </el-form>
        </el-form-item>

        <el-form-item label="描述" label-width="100px">
          <el-input
            type="textarea"
            :rows="4"
            v-model="nanotubeForm.desc"
            style="width: 87%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="AddNanotube()">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑主机 -->
    <el-dialog title="编辑主机" :visible.sync="editVisible" width="50%">
      <el-form
        :model="editNanotubeForm"
        size="mini"
        :rules="rules"
        ref="editNanotubeForm"
      >
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input
            v-model="editNanotubeForm.name"
            autocomplete="off"
            style="width: 87%"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="主机类型" label-width="100px" prop="hostType">
          <el-select v-model="editNanotubeForm.hostType" style="width: 87%">
            <el-option label="windows" :value="1"></el-option>
            <el-option label="linux" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 纳管类型 -->
        <el-form-item label="纳管类型" label-width="100px">
          <!--客户端  -->
          <el-form
            v-if="agentShow"
            :inline="true"
            :model="editAgent"
            ref="editAgent"
            class="demo-form-inline"
            size="mini"
            label-position="top"
            hide-required-asterisk
            :rules="rules"
          >
            <div style="display: flex; width: 100%">
              <el-form-item style="margin-top: 38px">
                <el-radio v-model="radio1" label="1">客户端</el-radio>
              </el-form-item>
              <el-form-item label="ip地址" prop="ip">
                <el-select
                  v-model="editAgent.ip"
                  filterable
                  allow-create
                  placeholder="请选择ip"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.ip"
                    :value="item.ip"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input v-model="editAgent.ip" placeholder="例如192.168.10.251"></el-input> -->
              </el-form-item>
              <el-form-item label="连接到" prop="useip">
                <el-radio-group v-model="editAgent.useip">
                  <el-radio-button label="1">IP</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="端口" prop="port">
                <el-input v-model.number="editAgent.port"></el-input>
              </el-form-item>
              <!-- 默认 -->
              <el-form-item label="默认" prop="main">
                <el-radio v-model="editAgent.main" label="1">{{ "" }}</el-radio>
              </el-form-item>
            </div>
          </el-form>

          <!--snmp -->
          <el-form
            v-if="snmpShow"
            :inline="true"
            :model="editSnmp"
            ref="editSnmp"
            class="demo-form-inline"
            size="mini"
            :rules="rules"
          >
            <div style="display: flex; width: 100%">
              <!-- 类型 -->
              <el-form-item>
                <el-radio v-model="radio1" label="2">SNMP</el-radio>
              </el-form-item>
              <!-- ip地址 -->
              <el-form-item prop="ip">
                <el-select
                  v-model="editSnmp.ip"
                  filterable
                  allow-create
                  placeholder="请选择ip"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.ip"
                    :value="item.ip"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input v-model="editSnmp.ip" placeholder="例如192.168.10.251"></el-input> -->
              </el-form-item>
              <!-- 连接到 -->
              <el-form-item prop="useip">
                <el-radio-group v-model="editSnmp.useip">
                  <!-- <el-radio-button label="DNS"></el-radio-button> -->
                  <el-radio-button label="1">IP</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <!-- 端口 -->
              <el-form-item prop="port">
                <el-input v-model.number="editSnmp.port"></el-input>
              </el-form-item>

              <!-- 默认 -->
              <el-form-item prop="main">
                <el-radio v-model="editSnmp.main" label="1">{{ "" }}</el-radio>
              </el-form-item>
            </div>
            <div style="display: flex; flex-direction: column; width: 100%">
              <el-form-item label="SNMP version" label-width="120px">
                <el-select
                  v-model="editSnmp.details.version"
                  style="width: 92%"
                >
                  <el-option label="SNMPv2" :value="2"></el-option>
                  <el-option label="SNMPv3" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <templete v-show="editSnmp.details.version == '3'">
                <el-form-item label="上下文名称" label-width="120px">
                  <el-input v-model="editSnmp.details.contextname"></el-input>
                </el-form-item>
                <el-form-item label="安全名称" label-width="120px">
                  <el-input v-model="editSnmp.details.securityname"></el-input>
                </el-form-item>
                <el-form-item label="安全级别" label-width="120px">
                  <el-select
                    v-model="editSnmp.details.securitylevel"
                    style="width: 92%"
                    disabled
                  >
                    <el-option label="noAuthNoPriv" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-checkbox
                    v-model="editSnmp.details.bulk"
                    true-label="1"
                    false-label="0"
                    >使用大量请求</el-checkbox
                  >
                </el-form-item>
              </templete>
              <templete v-show="editSnmp.details.version == '2'">
                <el-form-item label="SNMP community" label-width="120px">
                  <el-input v-model="editSnmp.details.community"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox
                    v-model="editSnmp.details.bulk"
                    true-label="1"
                    false-label="0"
                    >使用大量请求</el-checkbox
                  >
                </el-form-item>
              </templete>
            </div>
          </el-form>
        </el-form-item>

        <el-form-item label="描述" label-width="100px">
          <el-input
            type="textarea"
            :rows="4"
            v-model="editNanotubeForm.desc"
            style="width: 87%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editHost()">确 定</el-button>
        <el-button @click="editVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 账号弹窗 -->
    <el-dialog title="账号管理" :visible.sync="accountVisible">
      <el-form
        label-width="80px"
        ref="accountForm"
        :rules="rules"
        :model="accountForm"
        style="width: 30%"
      >
        <el-form-item label="主机名" prop="hostName">
          <el-input
            disabled
            v-model="accountForm.hostName"
            placeholder="请输入主机名"
          ></el-input>
        </el-form-item>
        <el-form-item label="主机ip" prop="hostIp">
          <el-input
            disabled
            v-model="accountForm.hostIp"
            placeholder="请输入主机ip"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="accountForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="accountForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getAddHostAccount('accountForm')"
          >确 定</el-button
        >
        <el-button @click="accountVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getHostExampleDetail_Api } from "@/api/configuration/resource";
import {
  getDashboardAvailable_Api,
  getAvailableProblemNumber_Api,
  getIsOpen_Api,
  getAvailableEnableHost_Api,
  getItemNum_Api,
  getTriggerNumber_Api,
  getHostAccountApi,
  getAddHostAccountApi,
  systemInstall,
} from "@/api/automated/instrumentPanel";
import {
  getHostSearch_Api, //查询主机列表
  getHostListGroup_Api,
  getChoiceHostModel_Api,
  getHostDelete_Api,
  updateHostStatus_Api, //修改主机状态
  getUpdateHost_Api,
} from "@/api/automated/host";
export default {
  data() {
    // var ip = (rule, value, callback) => {
    //     const ipv4Regex =
    //         /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    //     if (value == "") {
    //         callback(new Error("ip不能为空"));
    //     } else if (!ipv4Regex.test(value)) {
    //         callback(new Error("ip格式错误"));
    //     } else {
    //         callback();
    //     }
    // };
    var queryIp = (rule, value, callback) => {
      const ipv4Regex =
        /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?::[0-9]{1,5})?$/;
      if (!ipv4Regex.test(value)) {
        callback(new Error("ip格式错误"));
      } else {
        callback();
      }
    };
    return {
      system: false,
      systemform: {
        systemIp: "",
      },
      options: [],
      editVisible: false, //编辑显示隐藏
      //账号配置表单
      accountForm: {
        id: "",
        hostName: "",
        hostIp: "",
        username: "",
        password: "",
      },
      //账号配置弹窗
      accountVisible: false,
      responses: [],
      radio: "1",
      radio1: "1",
      infoLoading: true,
      hostLoading: true,
      //纳管表单
      nanotubeForm: {
        hostType: "",
        host: "", //必传，用ip
        name: "", //名称
        desc: "",
        interfaces: [],
      },
      agent: {
        type: "",
        main: "1",
        useip: "1",
        ip: "",
        port: "10050",
      },
      snmp: {
        type: "",
        main: "1",
        useip: "1",
        ip: "",
        port: "161",
        details: {
          version: "2",
          community: "",
          bulk: "1",
          securityname: "",
          contextname: "",
          securitylevel: "1",
        },
      },
      //编辑主机表单
      editNanotubeForm: {
        hostType: "",
        host: "", //必传，用ip
        name: "",
        desc: "",
        interfaces: [],
      },
      editAgent: {
        type: "",
        main: "1",
        useip: "1",
        ip: "",
        port: 10050,
      },
      agentShow: false,
      editSnmp: {
        type: "",
        main: "1",
        useip: "1",
        ip: "",
        port: 161,
        details: {
          version: "2",
          community: "",
          bulk: "1",
          securityname: "",
          contextname: "",
          securitylevel: "1",
        },
      },
      snmpShow: false,
      //群组
      group: [],
      dialogFormVisible: false,
      HostAvailability: {},
      question: {
        0: 0, //未分类
        1: 0, //信息
        2: 0, //警告
        3: 0, //一般严重
        4: 0, //严重
        5: 0, //灾难
      },
      //查询条件
      query: {
        name: "",
        groupids: "",
        ip: "",
        port: "",
        status: "",
        pageNum: 1,
        pageSize: 10,
      },
      //主机表格数据
      tableData_host: [],
      total: 0, //总数
      //查询表单验证
      queryRules: {
        ip: [{ validator: queryIp, trigger: "change" }],
        port: [
          {
            type: "number",
            required: false,
            message: "请输入端口,只能为数字",
            trigger: "change",
          },
        ],
      },
      //验证规则
      rules: {
        hostType: [
          { required: true, message: "请选择主机类型", trigger: "change" },
        ],
        group: [{ required: true, message: "请选择群组", trigger: "change" }],
        hosts: [{ required: true, message: "请选择主机", trigger: "change" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        ip: [{ required: true, message: "请选择ip", trigger: "change" }],
        // ip: [{ validator: ip, trigger: "blur" }],
        main: [{ required: true, message: "请选择默认", trigger: "change" }],
        version: [
          { required: true, message: "请选择SNMP version", trigger: "change" },
        ],
        community: [
          { required: true, message: "请输入community", trigger: "blur" },
        ],
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        port: [
          {
            type: "number",
            required: true,
            message: "请输入端口,只能为数字",
            trigger: "blur",
          },
        ],
        // type: [
        //     { required: true, message: '请选择类型', trigger: 'change' },
        // ],
        useip: [
          { required: true, message: "请选择连接到哪里", trigger: "change" },
        ],
        systemIp: [{ required: true, message: "请输入ip", trigger: "blur" }],
      },
    };
  },
  watch: {
    dialogFormVisible(val, oldVla) {
      this.$nextTick(() => {
        this.$refs["nanotubeForm"].clearValidate();
        this.$refs["snmp"].clearValidate();
        this.$refs["agent"].clearValidate();
      });
    }, // 此处监听variable变量，当期有变化时执行
    radio(item1, item2) {
      // item1为新值，item2为旧值
      if (item1 == "1") {
        this.$refs["snmp"].clearValidate();
      } else if (item1 == "2") {
        this.$refs["agent"].clearValidate();
      }
    },
    editVisible(val, oldVla) {
      this.$nextTick(() => {
        this.$refs["editNanotubeForm"].clearValidate();
        this.$refs["editAgent"].clearValidate();
        this.$refs["editSnmp"].clearValidate();
      });
    }, // 此处监听variable变量，当期有变化时执行
    radio1(item1, item2) {
      // item1为新值，item2为旧值
      if (item1 == "1") {
        this.$refs["editSnmp"].clearValidate();
      } else if (item1 == "2") {
        this.$refs["editAgent"].clearValidate();
      }
    },
  },
  methods: {
    showsystem() {
      this.system = true;
      this.systemform = {
        systemIp: "",
      };
    },
    //操作系统安装
    goSystem(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await systemInstall(this.systemform);
          let { code, msg } = res;
          if (code == 200) {
            window.open(msg);
            this.system = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getHostIp() {
      let res = await getHostExampleDetail_Api();
      let { code, rows } = res;
      if (code == 200) {
        this.options = rows.filter((item) => {
          return item.ip && item.ip !== "";
        });
        // console.log(this.options);
      }
    },
    //展示编辑
    showEdit(row) {
      this.agentShow = false;
      this.snmpShow = false;
      this.editNanotubeForm = {
        hostType: "",
        host: "",
        name: "",
        desc: "",
        interfaces: [],
      };
      this.editAgent = {
        type: "",
        main: "1",
        useip: "1",
        ip: "",
        port: 10050,
      };
      this.editSnmp = {
        type: "",
        main: "1",
        useip: "1",
        ip: "",
        port: 161,
        details: {
          version: "2",
          community: "",
          bulk: "1",
          securityname: "",
          contextname: "",
          securitylevel: "1",
        },
      };
      this.editNanotubeForm = { ...row };
      if (this.editNanotubeForm.type == "1") {
        this.radio1 = "1";
        this.agentShow = true;
        this.editAgent = { ...row.interfaces[0] };
        const port = row.interfaces[0].port;
        this.editAgent.port = Number(port);
      }
      if (this.editNanotubeForm.type == "2") {
        this.radio1 = "2";
        this.snmpShow = true;
        this.editSnmp = { ...row.interfaces[0] };
        const port = row.interfaces[0].port;
        this.editSnmp.port = Number(port);
      }
      this.editVisible = true;
    },
    //确认编辑
    async editHost() {
      this.editNanotubeForm.interfaces = [];
      if (this.radio1 == "1") {
        this.editNanotubeForm.interfaces.push(this.editAgent);
        this.editNanotubeForm.interfaces[0].type = "1";
      } else {
        this.editNanotubeForm.interfaces.push(this.editSnmp);
        this.editNanotubeForm.interfaces[0].type = "2";
      }
      /* 选择客户端 */
      if (this.radio1 == "1") {
        let editNanotubeForm;
        let editAgent;
        this.$refs["editNanotubeForm"].validate(async (valid) => {
          if (valid) {
            editNanotubeForm = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        this.$refs["editAgent"].validate(async (valid) => {
          if (valid) {
            editAgent = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        if (editAgent && editNanotubeForm) {
          let res = await getChoiceHostModel_Api(this.editNanotubeForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.dialogFormVisible = false;
            this.getHostList();
          } else {
            this.$message.error(msg);
          }
        }
      } else if (this.radio1 == "2") {
        /* 选择nmsp */
        let editNanotubeForm;
        let editSnmp;
        this.$refs["editNanotubeForm"].validate((valid) => {
          if (valid) {
            editNanotubeForm = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        this.$refs["editSnmp"].validate((valid) => {
          if (valid) {
            editSnmp = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        if (editSnmp && editNanotubeForm) {
          let res = await getUpdateHost_Api(this.editNanotubeForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.editVisible = false;
            this.getHostList();
          } else {
            this.$message.error(msg);
          }
        }
      }
    },
    //展示账号管理
    async showAccount(row) {
      this.accountForm = {
        id: row.hostid,
        hostName: row.host,
        hostIp: row.ip,
        username: "",
        password: "",
      };
      let res = await getHostAccountApi(row.hostid);
      let { code, data } = res;
      if (code == 200 && data != null) {
        this.accountForm = data;
      }
      this.accountVisible = true;
    },
    //修改账号
    getAddHostAccount(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddHostAccountApi(this.accountForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.accountVisible = false;
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取系统信息数据
    async getSystemInformation() {
      Promise.allSettled([
        getAvailableEnableHost_Api(), //主机可用数量
        getItemNum_Api(), //获取监控项数量
        getTriggerNumber_Api(), //获取触发器数量
      ])
        .then((responses) => {
          console.log(responses);
          this.responses = responses;
          // 所有请求都成功解析后的处理逻辑
          this.infoLoading = false;
        })
        .catch((error) => {
          // 处理错误
          this.infoLoading = false;
        });
    },
    //主机可用数量
    async getHostAvailability() {
      let res = await getDashboardAvailable_Api();
      let { code, data } = res;
      if (code == 200) {
        this.HostAvailability = data;
        // console.log(data);
      }
    },
    //获取问题数据
    async getQuestion() {
      let res = await getAvailableProblemNumber_Api();
      let { code, data } = res;
      if (code == 200) {
        if (data !== null) {
          this.question = data;
        }
      }
    },
    //获取主机列表数据
    async getHostList() {
      let res = await getHostSearch_Api(this.query);
      let { code, rows, msg } = res;
      if (code == 200) {
        this.tableData_host = rows;
        this.total = res.total;
        this.hostLoading = false;
      } else {
        this.$message.error(msg);
        this.hostLoading = false;
      }
    },
    //获取主机群组列表数据
    async getHostListGroup() {
      let res = await getHostListGroup_Api();
      let { code, data } = res;
      if (code == 200) {
        this.group = data;
      }
      // this.total = this.tableData_host.length;
    },
    //展示纳管
    showAddNano() {
      (this.nanotubeForm = {
        // hosts: [],
        hostType: "",
        host: "",
        name: "",
        // model: '',
        // group: '',
        desc: "",
        interfaces: [],
      }),
        (this.agent = {
          type: "",
          main: "1",
          useip: "1",
          ip: "",
          // dns: '',
          port: 10050,
        }),
        (this.snmp = {
          type: "",
          main: "1",
          useip: "1",
          ip: "",
          // dns: '',
          port: 161,
          details: {
            version: "2",
            community: "",
            bulk: "1",
            securityname: "",
            contextname: "",
            securitylevel: "1",
          },
        }),
        (this.dialogFormVisible = true);
    },
    //确定纳管
    async AddNanotube() {
      this.nanotubeForm.interfaces = [];
      if (this.radio == "1") {
        this.nanotubeForm.host = this.agent.ip;
        this.nanotubeForm.interfaces.push(this.agent);
        this.nanotubeForm.interfaces[0].type = "1";
      } else {
        this.nanotubeForm.host = this.snmp.ip;
        this.nanotubeForm.interfaces.push(this.snmp);
        this.nanotubeForm.interfaces[0].type = "2";
      }
      // let arr = [];
      // this.nanotubeForm.hosts.forEach(item => {
      //     let obj = {}
      //     obj.hostid = item
      //     arr.push(obj)
      // })
      // this.nanotubeForm.hosts = arr
      // console.log(this.nanotubeForm);
      /* 选择客户端 */
      if (this.radio == "1") {
        let nanotubeForm;
        let agent;
        this.$refs["nanotubeForm"].validate(async (valid) => {
          if (valid) {
            nanotubeForm = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        this.$refs["agent"].validate(async (valid) => {
          if (valid) {
            agent = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        if (agent && nanotubeForm) {
          let res = await getChoiceHostModel_Api(this.nanotubeForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.dialogFormVisible = false;
            this.getHostList();
          } else {
            this.$message.error(msg);
          }
        }
      } else if (this.radio == "2") {
        /* 选择nmsp */
        let nanotubeForm;
        let snmp;
        this.$refs["nanotubeForm"].validate((valid) => {
          if (valid) {
            nanotubeForm = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        this.$refs["snmp"].validate((valid) => {
          if (valid) {
            snmp = true;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        if (snmp && nanotubeForm) {
          let res = await getChoiceHostModel_Api(this.nanotubeForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.dialogFormVisible = false;
            this.getHostList();
          } else {
            this.$message.error(msg);
          }
        }
      }
      // this.nanotubeForm.hosts = []
    },
    //搜索
    handleQuery(formName) {
      this.getHostList(this.query);
    },
    //重置
    resize(formName) {
      this.query = {
        name: "",
        groupids: "",
        ip: "",
        port: "",
        status: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.$refs[formName].resetFields();
      this.getHostList();
    },
    //点击列表更多选中项
    handleCommand(command) {
      // console.log(command);
      if (command) {
        this.$router.push({
          path: command,
        });
      }
    },
    //删除主机
    deleteHost(row) {
      // console.log(row.hostid);
      this.$confirm("此操作将永久删除该主机, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await getHostDelete_Api(row.hostid);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getHostListGroup(); //获取主机群组列表数据
            this.getSystemInformation(); //获取系统信息数据
            this.getHostAvailability(); //获取主机可用性数据
            this.getQuestion(); //获取问题数据
            this.getHostList(); //获取主机数据
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //跳转自动{发现页面
    gotoAutodiscover() {
      this.$router.push({
        path: "AutoDiscover",
      });
    },
    //跳转脚本管理页面
    gotoScriptMange() {
      this.$router.push({
        path: "ScriptMange",
      });
    },
    //跳转配置备份页面
    goBackups(row) {
      this.$router.push({
        path: "Backups",
        query: {
          hostid: row.hostid,
          host: row.host,
          hostip: row.ip,
        },
      });
    },
    //跳远程管理
    remoteManage(ip) {
      // window.open("http://" + ip.split(":")[0] + ":8888");
      window.open("http://177.181.1.52:8888");
    },
    //跳转最新数据列表
    goEnviro(row) {
      // console.log(row);
      this.$router.push({
        path: "NewInfo",
        query: {
          id: row.hostid,
          host: row.host,
          ip: row.ip,
        },
      });
    },
    //列表样式
    getCellClass({ row, column, columnIndex }) {
      if (columnIndex === 3) {
        return "color:#409eff";
      } else {
        return "";
      }
    },
    //开启关闭主机状态（监控未监控）
    handleChangeStatus(row) {
      this.$confirm(
        `是否确认${row.status == 0 ? "关闭监控" : "开启监控"}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          updateHostStatus_Api({
            hostid: row.hostid,
            status: row.status == 0 ? 1 : 0,
          }).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getHostList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //跳转监控项页面
    goMonitoring(row) {
      let interfaceid = null;
      if (row.interfaces.length) {
        interfaceid = row.interfaces[0].interfaceid;
      }
      this.$router.push({
        path:
          "Monitoring?hostid=" +
          row.hostid +
          "&interfaceid=" +
          interfaceid +
          "&type=" +
          row.type +
          "&ip=" +
          row.ip,
      });
    },
    //跳转触发器页面
    goTrigger(id, ip, name) {
      this.$router.push({
        path:
          "Trigger?hostid=" + id + "&ip=" + ip.split(":")[0] + "&name=" + name,
      });
    },
    //补丁分发查询列表
    getPatch(id) {
      this.$router.push({
        path: "Patch?hostid=" + id,
      });
    },
  },
  created() {
    this.getHostListGroup(); //获取主机群组列表数据
    this.getSystemInformation(); //获取系统信息数据
    this.getHostAvailability(); //获取主机可用性数据
    this.getQuestion(); //获取问题数据
    this.getHostList(); //获取主机数据
    this.getHostIp();
  },
  filters: {
    //过滤严重性
    getSeverity(val) {
      switch (val) {
        case 1:
          return "可用";
        case 2:
          return "不可用";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 16px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

::v-deep .el-form-item__label {
  white-space: nowrap;
}

.instrument_panel_top {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100%;
  // border: 1px solid #ccc;
  border-radius: 10px;

  .el-statistic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70px;
  }
}

::v-deep .el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

::v-deep .el-icon-arrow-down {
  font-size: 12px;
}

//列表状态项，switch开关的css
.switch_box {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  margin: 0 auto;
}

.my_switch_checked {
  position: relative;
  background-color: #409eff;

  &::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background-color: #ffffff;
  }

  &::after {
    content: "已监控";
    position: absolute;
    display: block;
    width: 60px;
    left: 40px;
    color: #1890ff;
    z-index: 100;
  }
}

.my_switch_no {
  position: relative;
  background-color: #ff4949;

  &::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    right: 2px;
    top: 2px;
    border-radius: 50%;
    background-color: #ffffff;
  }

  &::after {
    content: "未监控";
    position: absolute;
    display: block;
    width: 60px;
    left: 40px;
    color: #ff4949;
    z-index: 100;
  }
}
</style>
